<template>
	<div>
		<!-- 浇次产出统计 -->
		<pol-title title="浇次产出统计">
			<template #right>
				<div class="flex text-white padding-right">
					<span>
						结晶器浇次
					</span>
					<div class="margin-left el-input-num">
						<el-select v-model="selectVal" placeholder="选择浇次号" size="small" style="width: 180px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
			</template>
		</pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg el-input-num text-white">
			<div class="flex">
				<div class="flex-sub">
					<div class="margin-bottom">
						结晶器浇次产出统计
					</div>

					<div class="flex padding bg-blue-title">
						<div class="flex align-center justify-center flex-sub solid-right">
							浇注炉数
							<span class="text-xl text-hs margin-left-lg">79</span>
						</div>
						<div class="flex align-center justify-center flex-sub">
							浇注重量(t)
							<span class="text-xl text-hs margin-left-lg">101445.59</span>
						</div>
					</div>
					<div class="bg-blue-furn">
						<div class="padding-lg solid-bottom">
							<div class="text-center">
								出胚总数（总量=正常坯+头坯+尾坯+废坯+采样坯）
							</div>
							<div class="margin-top text-center text-xl text-hs">
								1082=1073+0+0+9+0
							</div>
						</div>
						<div class="padding-lg">
							<div class="text-center">
								出胚总重量(t)（总量=正常坯+头坯+尾坯+废坯+采样坯）
							</div>
							<div class="margin-top text-center text-xl text-hs">
								9870.788=9812.716+0+0+58.073+58.073
							</div>
						</div>
					</div>
				</div>

				<div class="flex align-center padding-lr produce-top-r">
					<div class="picChart-box" ref="picChartRef"></div>
				</div>
			</div>
		</div>

		<!-- 浇次产出统计 -->
		<pol-title title="炉次产出统计" class="margin-top"></pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg text-white BarChart-warp">
			<div class="BarChart-box" ref="BarChartRef"></div>
		</div>
	</div>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue';
	const { proxy } = getCurrentInstance();

	const selectVal = ref('')
	const options = ref([{
		value: 'Option1',
		label: 'Option1',
	}])

	const picChartRef = ref(null)

	// 假设这是你的数据
	const data = [
		{ value: 1073, name: '正常坯' },
		{ value: 100, name: '采样坯' },
		{ value: 20, name: '废坯' },
		{ value: 15, name: '可疑坯' }
	];

	// 计算总数
	const total = data.reduce((sum, item) => sum + item.value, 0);

	// 动态生成 series 数据
	const seriesData = data.map(item => {
		// 计算占比
		const percentage = ((item.value / total) * 100).toFixed(2);
		// 动态生成 name

		let itemStyle = {
			color: {
				type: 'linear', // 线性渐变
				x: 0, // 渐变起始点 x
				y: 0, // 渐变起始点 y
				x2: 1, // 渐变结束点 x
				y2: 1, // 渐变结束点 y
				colorStops: [
					{ offset: 0, color: '#ff9a9e' }, // 起始颜色
					{ offset: 1, color: '#fad0c4' } // 结束颜色
				]
			}
		}
		let dataItem = {
			name: `${item.name}(${percentage}%)`, // 名称 + 占比
			value: item.value,
			itemStyle: itemStyle,
		}
		if (item.name === '正常坯') {
			itemStyle.color.colorStops[0].color = '#9ccffe'
			itemStyle.color.colorStops[1].color = '#087ce7'
		} else if (item.name === '采样坯') {
			itemStyle.color.colorStops[0].color = '#9fe6d0'
			itemStyle.color.colorStops[1].color = '#4ada9f'
		} else if (item.name === '废坯') {
			itemStyle.color.colorStops[0].color = '#afc6f4'
			itemStyle.color.colorStops[1].color = '#6a87be'
		} else if (item.name === '可疑坯') {
			itemStyle.color.colorStops[0].color = '#fbe6d0'
			itemStyle.color.colorStops[1].color = '#cb965a'
		}

		return dataItem
	});

	let option = {
		backgroundColor: 'transparent', // 设置背景为透明
		tooltip: {
			trigger: 'item'
		},
		legend: {
			left: 'center',
			data: seriesData.map(item => item.name) // 图例显示动态生成的 name
		},
		series: [{
			top: '20px',
			type: 'pie',
			radius: '70%',
			data: seriesData, // 图例显示动态生成的 name
			label: {
				show: true, // 显示文字标签
				formatter: '{c}', // 标签内容：名称 + 值 + 占比
			},
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};

	const BarChartRef = ref(null)
	const itemStyle = {
		color: {
			type: 'linear', // 线性渐变
			x: 0, // 渐变起始点 x
			y: 0, // 渐变起始点 y
			x2: 1, // 渐变结束点 x
			y2: 1, // 渐变结束点 y
			colorStops: [
				{ offset: 0, color: '#a0cffb' }, // 起始颜色
				{ offset: 1, color: '#0d7ee7' } // 结束颜色
			]
		}
	}
	let itemStyle1 = JSON.parse(JSON.stringify(itemStyle))

	let itemStyle2 = JSON.parse(JSON.stringify(itemStyle))
	itemStyle2.color.colorStops[0].color = '#c1fee5'
	itemStyle2.color.colorStops[0].color = '#60dca9'

	let itemStyle3 = JSON.parse(JSON.stringify(itemStyle))
	itemStyle3.color.colorStops[0].color = '#bdd1f8'
	itemStyle3.color.colorStops[0].color = '#748fc4'

	const source = [
		['product', '浇注重量', '出坯重量', '出坯数量'],
		['20240124', 4300.3, 8500.8, 10.7],
		['20240125', 8003.1, 7300.4, 5.1],
		['20240126', 8600.4, 6500.2, 6.5],
		['20240127', 7200.4, 5300.9, 8.1],
		['20240128', 7002.4, 5300.9, 12.1],
		['20240129', 7200.4, 5300.9, 5.1],
		['20240130', 7002.4, 5300.9, 2.1],
		['20240131', 7002.4, 5300.9, 3.1],
		['20240132', 7200.4, 5300.9, 5.1],
		['20240133', 7200.4, 5300.9, 8.1],
		['20240134', 7002.4, 5300.9, 9.1]
	]

	// 计算数据的最大值和最小值
	const salesData = source.slice(1).map(row => row[1]); // 销售额数据
	const costData = source.slice(1).map(row => row[2]); // 成本数据
	const profitData = source.slice(1).map(row => row[3]); // 利润数据

	const maxValue = Math.max(...salesData, ...costData, ...profitData); // 最大值
	
	const maxValue2 = proxy.$common.getNumDigit(maxValue)
	
	let option2 = {
		backgroundColor: 'transparent', // 设置背景为透明
		legend: {},
		tooltip: {},
		dataset: {
			source: source
		},
		xAxis: { type: 'category', },
		yAxis: [{
				type: 'value',
				name: '重量（t）', // 左边 Y 轴的描述
				nameLocation: 'end', // 描述显示在顶部
				// min: 0, // 最小值为 0
				// max: maxValue2, // 最大值为 200
				splitLine: {
					show: false // 隐藏辅助横线
				},
			},
			{
				type: 'value',
				name: '数量（个）', // 右边 Y 轴的描述
				nameLocation: 'end', // 描述显示在顶部
				// min: 0, // 最小值为 0
				// max: maxValue2, // 最大值为 200
				splitLine: {
					show: false // 隐藏辅助横线
				},
				position: 'right' // 将 Y 轴放置在右边
			}
		],
		series: [{
				type: 'bar',
				itemStyle: itemStyle1,
				yAxisIndex: 0 // 关联到第一个 Y 轴（左边）
			},
			{
				type: 'bar',
				itemStyle: itemStyle2,
				yAxisIndex: 0 // 关联到第一个 Y 轴（左边）
			}, {
				type: 'bar',
				itemStyle: itemStyle3,
				yAxisIndex: 1 // 关联到第一个 Y 轴（左边）
			}
		]
	};

	onMounted(() => {
		// 饼图
		var myChart = proxy.$echarts.init(picChartRef.value, 'dark');
		option && myChart.setOption(option);

		//柱状图
		var myChart2 = proxy.$echarts.init(BarChartRef.value, 'dark');
		option && myChart2.setOption(option2);
	})
</script>

<style lang="scss" scoped>
	.produce-top-r {
		flex-basis: 45%;
	}

	.text-hs {
		color: #FFA73F;
	}

	.picChart-box {
		width: 100%;
		height: 260px;
	}

	.BarChart-warp {
		height: calc(100vh - 535px);

		.BarChart-box {
			width: 100%;
			height: calc(100vh - 560px);
		}
	}
</style>